<template>
	<div class="end-node" :style="nodeModel"  @mouseup="changeNodePos" ref="node">
		<i class="el-icon-edit editpanel-visible-icon" @click="onEditIconClickHandler"></i>
		<i class="start-node-icon el-icon-user-solid flow-node-drag"></i>
		<span class="end-node-title">
			结束
		</span>
		<el-drawer :title="'结束'+nodeModel.id" v-model="drawerVisible" :append-to-body="true">
			<el-form ref="form" label-width="100px">
				<el-divider content-position="left">节点事件</el-divider>
				<el-form-item label="start事件">
					<el-input v-model="currentNodeModel.startEventExpression" size="small" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="end事件">
					<el-input v-model="currentNodeModel.endEventExpression" size="small" type="textarea"></el-input>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	export default {
		name: "EndNode",
		props: ["nodeModel"],
		data() {
			return {
				drawerVisible: false,
				joinTypeList:[
					{"value":"xor","name":"xor"},
					{"value":"and","name":"and"}
				],"currentNodeModel":this.nodeModel
			}
		},beforeMount() {
			if(this.nodeModel.joinType==undefined){
				this.currentNodeModel.joinType="xor";
			}
		},
		methods: {
			changeNodePos(){
				this.currentNodeModel["left"]=this.$refs.node.style.left;
				this.currentNodeModel["top"]=this.$refs.node.style.top;
			},onEditIconClickHandler(){
				this.drawerVisible = true;
				this.$store.state.workflowDesigner.setSelectedComponent(this);
			}
		},
	}	
</script>

<style>
	
</style>
